<template>
  <div>
    <el-table
        :data="tableData"
        style="width: 100%">
      <el-table-column
          fixed
          prop="id"
          label="物流订单"
          width="200">
      </el-table-column>
      <el-table-column
          prop="name"
          label="发货人"
          width="120">
      </el-table-column>
      <el-table-column
          prop="productionName"
          label="产品名称"
          width="150">
      </el-table-column>
      <el-table-column
          prop="productionNum"
          label="产品数量"
          width="150">
      </el-table-column>
      <el-table-column
          prop="createTime"
          label="时间"
          width="200">
      </el-table-column>
      <el-table-column
          prop="remark"
          label="备注"
          width="150">
      </el-table-column>
      <el-table-column
          prop="status"
          label="状态"
          width="120">
      </el-table-column>
      <el-table-column
          prop="shopname"
          label="所到商场"
          width="120">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="300">
        <template slot-scope="scope">
          <el-button v-if="scope.row.status=='未运输'" @click="handleClick(scope.row.id)" type="text" size="small">开始运输</el-button>
          <el-button v-if="scope.row.status=='开始运输'" type="text" size="small" @click="monitor(scope.row.id)">物流监控</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        @current-change="gopage"
        :page-size="5"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>

    <el-dialog title="联系司机" :visible.sync="dialogFormVisible" width="700px">
      <el-form :model="form">
        <el-form-item label="要运输的商城" :label-width="formLabelWidth">
          <el-select v-model="form.businessId" placeholder="请选择商城" clearable @change="shop(form.businessId)">
            <el-option v-for="d in shopdata" :label="d.name" :value="d.id" v-bind:key="d.id" ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="商城负责人" :label-width="formLabelWidth">
          <el-input v-model="form.businessName" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="联系方式" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off" disabled></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="flow()">提 交 订 单</el-button>
      </div>
    </el-dialog>

    <el-dialog title="物流追踪" :visible.sync="dialogFormVisible2">
      <div id="container" class="map"></div>
      <div id="panel"></div>
    </el-dialog>
  </div>

</template>

<script>
import AMapLoader from "@amap/amap-jsapi-loader";
export default {
  name: "FlowView",
  data() {
    return {
      tableData:[],
      pageNum:1,
      total:0,
      form:{},
      dialogFormVisible:false,
      formLabelWidth:"120px",
      shopdata:[],
      dialogFormVisible2:false,
      lineArr: [],
      startLngLat:[],
      endLngLat:[],
    }
  }, methods: {
    gopage(page){
      this.pageNum=page;
      this.getList();
    },
    getList(){
      this.axios.post("flowservice/flow/list?pageNum="+this.pageNum).then(res=>{
        this.tableData=res.data.data.list;
        this.total=res.data.data.total;
      })
    },
    handleClick(id){
      console.log(id);
      this.dialogFormVisible=true;
      this.shoplist();
      this.form.id=id;
    },
    shoplist(){
      this.axios.post("flowservice/shop/shoplist").then(res=>{
        this.shopdata=res.data.data;
      })
    },
    shop(id){
      this.shoplist();
      this.axios.post("flowservice/shop/bussnass?id="+id).then(res=>{
        console.log(res);
        this.form.businessName=res.data.data.head;
        this.form.phone=res.data.data.tel;
      })
    },
    flow(){
      this.axios.post("flowservice/shop/shopadd",this.form).then(res=>{
        if(res.data.code==200){
          this.$message.success("已提交订单");
          this.dialogFormVisible=false;
          this.getList();
        }else{
          this.$message.error("提交失败，检查您的订单");
        }
      })
    },
    getLineArr(id){
      this.axios.post("http://localhost:10010/flowservice/shop/getLineArr?id="+id).then(res=>{
        console.log(res.data)
        this.startLngLat=res.data[0];
        this.endLngLat=res.data[1];
      })
    },
    monitor(row){
      this.dialogFormVisible2=true;
      this.getregular(row);
      this.getLineArr(row);
      this.initAMap()
    },
    getregular(row){
      this.axios.post("http://localhost:10010/flowservice/shop/getregular?id="+row).then(res=>{
        if(res.data.code==200){
          this.$message.success("完成运输");
          this.getList();
        }else{
          this.$message.error("物流出现异常");
        }
      })
    },
    // initAMap() {
    //   window._AMapSecurityConfig = {
    //     securityJsCode: "e94e0e0afa1842f9327e06ca955297a7",
    //   };
    //   AMapLoader.load({
    //     key: "d0a13e507309316024509a088bf8cfee", // 申请好的Web端开发者Key，首次调用 load 时必填
    //     version: "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
    //     plugins: ["AMap.Scale"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
    //   })
    //       .then((AMap) => {
    //         var map  = new AMap.Map("container", {
    //           // 设置地图容器id
    //           viewMode: "3D", // 是否为3D地图模式
    //           resizeEnable: true,
    //           center: this.lineArr[0],
    //           zoom: 9
    //         });
    //         var marker = new AMap.Marker({
    //           position: this.lineArr[0],
    //           icon: 'https://webapi.amap.com/images/car.png',
    //           //坐标偏移
    //           offset: new AMap.Pixel(-26, -13),
    //           autoRotation: true,
    //           angle: -90,
    //           map: map
    //         });
    //         // 绘制轨迹路线
    //         var polyline = new AMap.Polyline({
    //           map: this.map,
    //           //这里替换自己的坐标数据
    //           path: this.lineArr,
    //           borderWeight: 2, // 线条宽度，默认为 1
    //           strokeColor: 'red', // 线条颜色
    //           lineJoin: 'round' // 折线拐点连接处样式
    //         });
    //         map.add(polyline);
    //         //调用方法开启动画
    //         marker.moveAlong(this.lineArr, 30000);
    //       })
    //       .catch((e) => {
    //         console.log(e);
    //       });
    // },
    initAMap() {
      window._AMapSecurityConfig = {
        securityJsCode: "f4d27549e10b2ca24bb8133e532ab1de",
      };
      AMapLoader.load({
        key: "ee4744378fea1c3e7ab81297836d45b7", // 申请好的Web端开发者Key，首次调用 load 时必填
        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ["AMap.Scale","AMap.Driving"], //需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
      })
          .then((AMap) => {
            const map  = new AMap.Map("container", {
              // 设置地图容器id
              viewMode: "2D", // 是否为3D地图模式
              resizeEnable: true,
              center: this.lineArr[0],
              zoom: 9
            });
            const startLngLat = this.startLngLat //起始点坐标
            const endLngLat = this.endLngLat //终点坐标
            AMap.plugin(["AMap.Driving"], function () {
                  const driving = new AMap.Driving({
                    map: map,
                    panel: "panel",
                  });
                  driving.search(startLngLat,endLngLat, function (status, result) {
                    if (status === "complete") {
                      //status：complete 表示查询成功，no_data 为查询无结果，error 代表查询错误
                      //查询成功时，result 即为对应的驾车导航信息
                      console.log(result);
                    } else {
                      console.log("获取驾车数据失败：" + result);
                    }
                  });
                },

            );
            this.lineArr=[startLngLat,endLngLat];
            var marker = new AMap.Marker({
              position: this.lineArr[0],
              icon: 'https://webapi.amap.com/images/car.png',
              //坐标偏移
              offset: new AMap.Pixel(-26, -13),
              autoRotation: true,
              angle: -90,
              map: map
            });

            //调用方法开启动画
            marker.moveAlong(this.lineArr, 30000);
          })
          .catch((e) => {
            console.log(e);
          });
    },
  }, created() {
    this.getList();

  }
}
</script>

<style scoped>
#container {
  width: 80%;
  height: 400px;
  margin: 100px auto;
  border: 2px solid red;
}
</style>
